﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="<s:url value="/view/common_view/css/style.css"/>"
	rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- CHOOSE BIRTHDAY -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
	$(document).ready(function() {
		$("#ngaysinh").datepicker({dateFormat:'dd/mm/yy'});
		$("#ngaysinh").datepicker("option", "dateFormat", "dd/mm/yy");
	});
</script>

<sx:head /> 

<script language="javascript">
		function loadDistricts(value1){				  
			$("#quanhuyen").find('option').remove().end();
			/* $.getScript("http://www.someothersite.com/script.js");
			$.ajaxSetup({
				  cache: true
				}); */
			$.ajax({ 
			    type: 'GET', 
			    url: '/CungdealApplication_API/json/GetDistrictByCityAction/'+value1, 
			    /* data: { city_ID: value1 }, */
			    contentType: "application/json; charset=utf-8",
			    dataType: 'json',
			    success: function (data) { 
			        for(var i=0; i<data.district.length;i++){
			        	var districtID=data.district[i].districtID;
			        	$("#quanhuyen").append("<option value="+data.district[i].districtID+">"+data.district[i].districtName+"</option>");
			        }
			    },
			    error: function (er){
			    	alert("The browser does not support AJAX!!!");
			    }
			});
		}	
		
</script>

<script>
 $(function() {
   $( document ).tooltip({
     position: {
       my: "center bottom-12",
       at: "center top",
       using: function( position, feedback ) {
         $( this ).css( position );
         $( "<div>" )
           .addClass( "arrow" )
           .addClass( feedback.vertical )
           .addClass( feedback.horizontal )
           .appendTo( this );
       }
     }
   });
 });
</script>

<title><s:property value="getText('title.dangkikhachhang')"/></title>

<s:if test="#session != null && (#session.master_user != null)">	
	<META HTTP-EQUIV="Refresh" CONTENT="1;URL=master/home.html">
</s:if>

</head>


<body>
<div id="maincontent">
	<div id="register_consumer">
		<s:form id="frmregister_consumer" method="POST"
			action="insert-consumer" enctype="multipart/form-data">
			<fieldset>
				<legend>
				<div id="panelHeader">
					<s:property value="getText('legend.dangkikhachhang')"/>
				</div>
				</legend>
				<!-- label Thông báo-->
				<div id="thongbao" class="thongbao">
					<div>
						<label class="message" for="message"><s:property value="getText('message.thongbao')"/></label>
					</div>
				</div>
				<div id="thongbao1" class="thongbao">
					<div style="color: red" id="message">
						<s:iterator value="arrErrorMessage" status="stt">
							<s:property value="arrErrorMessage.get(#stt.index)" />
							<br />
						</s:iterator>
					</div>
					<hr>
				</div>
				<div id="registerconsumercontent">
					<!--==================================================================== LABEL-->
					<div id="label" class="regist-consumer-text">
						<div>
							<label class="email" for="email">Email (*):</label>
						</div>
						<div>
							<label class="hoten" for="hoten"><s:property value="getText('label.hoten')"/> (*):</label>
						</div>
						<div>
							<label class="gioitinh " for="gioitinh"><s:property value="getText('label.gioitinh')"/> (*):</label>
						</div>
						<div>
							<label class="ngaysinh" for="ngaysinh"><s:property value="getText('label.ngaysinh')"/>:</label>
						</div>
						<div>
							<label class="thanhpho" for="thanhpho"><s:property value="getText('label.thanhpho')"/> (*):</label>
						</div>
						<div>
							<label class="quanhuyen" for="quanhuyen"><s:property value="getText('label.quanhuyen')"/> (*):</label>
						</div>
						<div>
							<label class="diachi" for="diachi"><s:property value="getText('label.diachi')"/> (*):</label>
						</div>
						<div>
							<label class="sodienthoai" for="sodienthoai"><s:property value="getText('label.sodienthoai')"/> (*):</label>
						</div>
						<div>
							<label class="tentaikhoan" for="tentaikhoan"><s:property value="getText('label.tentaikhoan')"/> (*):</label>
						</div>
						<div>
							<label class="cm-password" for="password1"><s:property value="getText('label.cm-password1')"/> (*):</label>
						</div>
						<div>
							<label class="cm-password" for="password2"><s:property value="getText('label.cm-password2')"/> (*):</label>
						</div>
						<div>
							<label class="hinhanh" for="hinhanh"><s:property value="getText('label.chonhinhanh')"/>:</label>
						</div>
						<div>
							<label class="dangki" for="dangki"></label>
						</div>
					</div>
					<!--==================================================================== TEXTBOX-->
					<div id="textbox" class="regist-consumer-text">
						<div>
							<s:textfield id="email" class="email" type="text" size="50"
								name="email" title="Nhập email với độ dài tối đa 50 kí tự" />
						</div>
						<div>
							<s:textfield id="hoten" class="hoten " type="text" size="50" 
								name="fullName" title="Nhập họ tên với chiều dài tối đa 6-50 kí tự"/>
						</div>
						<div>
							<s:select id="gioitinh" class="gioitinh"
								headerKey="undefined" headerValue="--" 
								list="genders"
								name="genderSelected"
								value="genderSelected"
								listKey="genderID"
								listValue="genderName" 
								>
							</s:select>
						</div>
						<div>
							<s:textfield id="ngaysinh" title="Ngày sinh phải theo định dạng dd/mm/yyyy. Ví dụ ngày 21 tháng 12 năm 2013 có dạng: 21/12/2013" size="50" name="birthDay" />
						</div>
						<div>
							<s:select id="thanhpho" class="thanhpho"
								headerKey="0" headerValue="--" 
								list="city"
								value="citySelected"
								name="citySelected"
								onchange="loadDistricts(this.value);"
								listKey="cityID"
								listValue="cityName" 
								>
							</s:select>
						</div>						
						<div>
							<s:select id="quanhuyen" class="quanhuyen"
								headerKey="0" headerValue="--" 
								list="district"
								value="districtSelected"
								name="districtSelected"
								listKey="districtID"
								listValue="districtName" 
								>
							</s:select>
						</div>
						<div>
							<s:textfield id="diachi" class="diachi" type="text" size="50"
								name="address" title="Nhập địa chỉ với chiều dài tối đa 10-100 kí tự"/>
						</div>
						<div>
							<s:textfield id="sodienthoai" class="sodienthoai" type="text"
								size="50" name="phoneNumber" title="Nhập số điện thoại với chiều dài tối đa từ 11-20 kí tự" />
						</div>
						<div>
							<s:textfield id="tentaikhoan" class="tentaikhoan" type="text"
								size="50" name="userID" title="Nhập tên tài khoản chỉ bao gồm các kí tự a-zA-Z0-9. Độ dài từ 6- 25 kí tự"/>
						</div>
						<div>
							<s:password id="signup-password" class="f-input" type="password"
								datatype="require" require="true" size="50" name="passWord" 
								title="Nhập mật khẩu có độ dài tối đa 6-50 kí tự"/>
						</div>
						<div>
							<s:password id="signup-password-confirm" class="f-input"
								type="password" compare="signup-password" datatype="compare"
								require="true" name="confirmPassword" size="50" 
								title="Nhập lại mật khẩu phải trùng với mật khẩu đã nhập"/>
						</div>
						<div>
							<input id="chonhinh" accept="image/*" type="file" <s:property value="getText('label.chonhinhanh')"/> name="myfile" >
						</div>
						<div>
							<button id="button_consumer" class="btn btn-success" type="submit" title="Nhấn để đăng kí tài khoản"><s:property value="getText('button.dangky')"/></button>
						</div>
					</div>
				</div>
				<!--==================================================================== BUTTON-->
			</fieldset>
		</s:form>
	</div>
</div>
</body>
</html>